
<template>

 <div>
   <div>
     <div class="mider">
       <div class="coil-v">
         <p>
           基本信息
         </p>
       </div>
       <div class="coil-R">
         <div class="coli-O">
         <div class="zosec" clear>
           供货厂商:<el-select v-model="mycor" placeholder="请选择">
           <el-option
                   v-for="item in options"
                   :key="item.mycor"
                   :label="item.label"
                   :value="item.mycor">
           </el-option>
         </el-select>
         </div>

          <div class="zosec">
            付款类型:<el-select v-model="mydoxs" placeholder="请选择">
            <el-option
                    v-for="item in sevess"
                    :key="item.mydoxs"
                    :label="item.label"
                    :value="item.mydoxs">
            </el-option>
          </el-select>
          </div>
        <div class="zosec">
          审批人:<el-select v-model="value3" placeholder="请选择">
          <el-option
                  v-for="item in sevels"
                  :key="item.value3"
                  :label="item.label"
                  :value="item.value3">
          </el-option>
        </el-select>
        </div>
           <div class="zosec">

             采购日期:<el-date-picker
                   v-model="value1"
                   type="date"
                   id="fofdes"
                   placeholder="选择日期">
           </el-date-picker>
           </div>

         </div>
       </div>
     </div>

     <div class="momi">
       <!--tou-->
       <div class="hemo">
         <p>选择商品</p>
       </div>
       <div class="ezer">
         <div class="zozsre">
           选择商品:<el-select v-model="mybom" placeholder="请选择">
           <el-option
                   v-for="item in sangon"
                   :key="item.mybom"
                   :label="item.label"
                   :value="item.mybom">
           </el-option>
         </el-select>

           选择类型:<el-select v-model="mydemo" placeholder="请选择">
           <el-option
                   v-for="item in leion"
                   :key="item.mydemo"
                   :label="item.label"
                   :value="item.mydemo">
           </el-option>
         </el-select>

           商品标题:<el-select v-model="demos" placeholder="请选择">
           <el-option
                   v-for="item in biaoon"
                   :key="item.demos"
                   :label="item.label"
                   :value="item.demos">
           </el-option>
         </el-select>

           <el-button type="primary" plain>搜索</el-button>
         </div>
       </div>
       <div class="doys clear">
         <div class="gog">
           <p>搜索结果</p>
         </div>
         <el-table
                 :data="tableData"
                 border
                 style="width: 100%">
           <el-table-column
                   fixed
                   prop="id"
                   label="编号"
                   width="80">
           </el-table-column>
           <el-table-column
                   fixed
                   prop="name"
                   label="商品名称"
                   width="160">
           </el-table-column>
           <el-table-column
                   prop="bigUnit"
                   label="大单位"
                   width="130">
           </el-table-column>
           <el-table-column
                   prop="bigPrice"
                   label="大单位单价"
                   width="130">
           </el-table-column>
           <el-table-column
                   prop="smallUnit"
                   label="小单位"
                   width="130">
           </el-table-column>
           <el-table-column
                   prop="smallPrice"
                   label="小单位价格"
                   width="130">
           </el-table-column>
           <el-table-column
                   prop="inventory"
                   label="现有库存"
                   width="130">
           </el-table-column>
           <el-table-column
                   fixed="right"
                   label="操作">
             <template slot-scope="scope">
               <el-button :plain="true" @click="abuot(scope.id)" >添加</el-button>
<!--               <el-button @click="abuot(scope.id)" type="text" size="small">添加</el-button>-->
             </template>
           </el-table-column>
         </el-table>

         <!-- 分页 -->
         <div class="lolfs">
           <el-pagination
                   background
                   layout="prev, pager, next"
                   :total="1000">
           </el-pagination>
         </div>
       </div>
     </div>
   </div>

   <div>
     <div class="cfss-v">
      <p>商品明細</p>
     </div>
     <div>
       <el-table
               :data="tableList"
               border
               style="width: 100%">
         <el-table-column
                 prop="id"
                 label="编号"
                 width="80">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="商品名称"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="bigUnitPrice"
                 label="单价/大单位"
                 width="130">
         </el-table-column>
         <el-table-column
                 prop="bigAmount"
                 label="数量"
                 width="130">
           <template slot-scope="scope">
           <el-input-number size="mini" v-model="scope.row.bigAmount" max="100"
                            @change="handleChange(scope.row.bigAmount,scope.row.id,scope.row.smallAmount)"></el-input-number>
           </template>
         </el-table-column>
         <el-table-column
                 prop="smallUnitPrice"
                 label="小单位价格"
                 width="120">
         </el-table-column>
         <el-table-column
                 prop="smallAmount"
                 label="数量"
                 width="120">
           <template>
           <el-input-number size="mini" v-model="numsamll" max="100"></el-input-number>
           </template>
         </el-table-column>
         <el-table-column
                 prop="money"
                 label="金额"
                 width="120">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="操作"
                 width="150">
           <template slot-scope="scope">
             <el-button @click="opende(scope.row.id)" type="text" size="small">移除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div class="dulet">
       <div class="btno font">
         商品共计:<input type="text">
       </div>
       <div class="bton lesot">
         金额合计:<input type="text">
       </div>
       <div class=" dovv">
         <button @click="pink1">提交</button>
       </div>
<!--         <el-button type="primary" round>提交</el-button>-->
     </div>
   </div>
 </div>
</template>
  <script>
    import {shengpiApi, xiansi ,shanchu,biaoge,fukuanxl,jiajian,mytianja} from "@/http/proApi/caigou";
    export default {
      created() {
        this.getsize(this.page,this.size);
        this.biaoge();
      },
      methods: {
        //点击添加事件
        abuot(id) {
          console.log();
            mytianja(id).then((res) =>{
              console.log(res);
            }).catch((err)=>{
              console.log(err);
            })
          this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          });
        },


        handleChange(bigAmount,id,smallAmount) {
          // let pid =
          jiajian(bigAmount,id,smallAmount)
        },
        handleClick(row) {
          console.log(row);
        },
        opende(id) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {//表二删除
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            shanchu(id).then(res => {
              console.log(res)
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.biaoge();
            })
                    .catch(e => {
                      console.log(e)
                    })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        getsize(page, size) {//表一数据获取
          xiansi(page, size)
                  .then((res) => {
                    console.log("获取信息：", res)
                    this.tableData = res.data.data
                  })
                  .catch((err) => {
                    console.log(err)
                  })
        },
        hodd(row) {
          console.log(row)
          xiansi(row.id, row.status)
                  .then((res) => {
                    console.log(res)
                  })
                  .catch((err) => {
                    console.log("请求失败：", err)
                  })
        },
        goodclr(row) {
          shengpiApi(row.purchase).then((res) => {
            console.log(res)
          })
        },
        nons1() {
          this.$message('提示');
        },
        pink1() {


          this.$message({

            message: '提交成功 ！',
            type: 'success'
          });
        },
        pink2() {
          this.$message({
            message: '警告',
            type: 'warning'
          });
        },
        pink3() {
          this.$message.error('提交失败 ！');
        },


        biaoge() {
          biaoge().then((res) => {//表二数据获取
            console.log("获取信息", res)
            this.tableList = res.data.data
          })
                  .catch((err) => {
                    console.log(err)
                  })
        },
        meita(row){
          console.log(row)
          xiansi(row.id,row.status).then((res)=>{
              console.log(res)
             }).catch((err)=>{
              console.log("请求失败：",err)
             })
        },

        zseass() {
          fukuanxl().then((res) => {
            console.log("获取信息", res)
            this.tableList = res.data.data
          })
                  .catch((err) => {
                    console.log(err)
                  })
        },
        helloszt(){
          fukuanxl().then((res)=>{
            console.log(res)
          }).catch((err)=>{
            console.log("请求失败:",err)
          })
        },



      },
      data() {
        return {
          page:1,
          size:10,
          numBig: 1,
          numsamll:1,
          options: [{//供货厂商
            mycor: '选项1',
            label: 'A供应商'
          }, {
            mycor: '选项2',
            label: 'B供应商'
          }, {
            mycor: '选项3',
            label: 'C供应商'
          }],
          mycor:'',
          sevess: [{//付款类型
            mydoxs: '选项1',
            label: '微信支付'
          }, {
            mydoxs: '选项2',
            label: '银行卡支付'
          }, {
            mydoxs: '选项3',
            label: '现金支付'
          }],
          mydoxs:'',
          sevels: [{//审批人
            value3: '选项1',
            label: '李某'
          }, {
            value3: '选项2',
            label: '张某'
          }, {
            value3: '选项3',
            label: '范某'
          }],
          value3:'',
          severs: [{//采购日期
            value4: '选项1',
            label: '黄金糕'
          }, {
            value4: '选项2',
            label: '双皮奶'
          }, {
            value4: '选项3',
            label: '蚵仔煎'
          }],
          value4:'',
          sangon: [{//选择商品
            mybom: '选项1',
            label: '商品名'
          }, {
            mybom: '选项2',
            label: '商品名'
          }, {
            mybom: '选项3',
            label: '商品名'
          }],
          mybom:'',
          leion: [{//选择类型
            mydemo: '选项1',
            label: 'A类'
          }, {
            mydemo: '选项2',
            label: 'A类'
          }, {
            mydemo: '选项3',
            label: 'A类'
          }],
          mydemo:'',
          biaoon: [{//选择标题
            demos: '选项1',
            label: '黄金糕'
          }, {
            demos: '选项2',
            label: '双皮奶'
          }, {
            demos: '选项3',
            label: '蚵仔煎'
          }],
          demos: '',
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          value1: '',
          value2: '',

          tableData: [],
          tableList:[]
        }
      },


    }
  </script>
<style lang="scss" scoped>
  .mider{
    margin-bottom: 20px;
    border:1px solid #bebebe;
    font-size:13px;

    .coil-v{
      width: 100%;
      height:35px;
      background: #e4e4e4;

    }
    .coil-R{
      width: 100%;
      height:45px;
      line-height:45px;
      .coli-O{
        width:100%;
        height:45px;
        /*border:1px solid black;*/
        margin: 0 auto;

       .zosec{
         float: left;
         margin-left:20px;

       }

      }
      .el-input__inner{
        width: 150px;
        height:35px;

      }
    }
  }


  .cell{
    text-align:center;
    font-size: 12px;
  }
 .header{
   margin-bottom: 30px;
   font-size:15px;
 }
.el-input__inner{
  width:130px;font-size:12px;

}
  .el-input__icon {
    margin-left: 10px;
  }
  .gog{
    width: 100%;
    height:35px;
    background: rgba(217, 217, 217, 0.74);
    line-height:35px;
    font-size:13px;

    p{
      margin-left:20px;
    }
  }
  .doys{
    padding: 10px;
  }
  .momi{
    /*width: 100%;*/
    /*height:450px;*/
  border:1px solid #bebebe;

  }
  .hemo{
    width: 100%;
    height: 35px;
    background: #e4e4e4;

  }
  p{
    line-height:35px;
    margin-left:20px;
    font-size:13px;
  }
  .lolfs{
    width:420px;
    height:35px;
    /*border:1px solid #4b2e8b;*/
    float: right;
    padding:10px;

  }
  .ezer{
    width: 100%;
    height:45px;
    /*border:1px solid #2c3e50;*/
    line-height:45px;
    /*text-indent: 20px;*/
    font-size:13px;

    .zozsre{
      margin-left:20px;
      /*border:1px solid #2c3e50;*/
    }

    .el-input__inner{
      width: 120px;
      height:35px;
    }

    .is-plain {
      width:80px;
      height:35px;
      margin-left:20px;
      /*border:1px solid #2163a8;*/
      margin-top:10px;
    }
  }
  .cfss-v{
    width: 100%;
    height:35px;
    background: #e4e4e4;
    margin-top:20px;
    line-height:35px;
    font-size: 13px;
  }
.clear::after,
.clear::before{
  display: table;
  content:"";
}
.clear::after{
  clear: both;
}
  .srof{
    width:20px;
  }
  .dulet{
    width: 100%;
    height: 45px;
    /*border:1px solid darkblue;*/
    line-height:45px;
    background: #e4e4e4;
    font-size: 13px;

    input{
      width: 100px;
      height:35px;
      border:none;
      font-size: 13px;
      outline: none;
    }
    .btno{
      float: left;
      margin-left: 20px;

      input{
        outline: none;
      }
    }
  }
  .dovv{
   position: relative;
    bottom:45px;
    right: 20px;
   /* left: 900px;*/
    float: right;

    button{
      width: 80px;
      height: 35px;
      /*background: #409EFF ;*/
      color:white;
      border-style:none;
    }
  }
  .el-input__inner{
    width: 100px;
  }
  .el-input-number{
    width: 100px;
  }


</style>